<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <base href="http://localhost:8080/students/">
    <script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //给用户绑上单击事件
            $("#submit").click(function () {

                //1. 验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位
                //   步骤，获取用户名输入框里内容;创建正则表达式，使用test方法，提示用于信结果
                let username = $("#username").val();
                let usernamePatt = /^\w{5,12}$/;
                //.test方法为验证 正则表达式的方法
                if (!(usernamePatt.test(username))) {
                    $("#span").text("用户不合法!");
                    return false;
                }

                //2. 判断用户密码是否输入错误
                let pwd1 = $("#password").val();
                let pwd2 = $("#password2").val();
                if (pwd1 !=null && pwd1 != pwd2){
                    $("#span").text("确认密码有误!");
                    return false;
                }

                //3. 判断邮箱格式是否错误，使用正则表达式判断
                let email = $("#email").val();
                let emailPatt =  /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                if (!emailPatt.test(email)) {
                    $("#span").text("邮箱不合法!");
                    return false;
                }

                //用户输入合法后，把用 不合法的相关信息去掉
                $('span.errorMsg').text('')
            })
        })
    </script>
</head>
<body>
    <form action="registerServlet" method="post" >

        <div align="middle" style="color: red" id="register">欢迎注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="pages/user/login.html">返回登录界面</a>
        </div>
        <div align="middle">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="span" style="color: crimson"></span>
        </div>
        <div align="middle" >用&nbsp;&nbsp;户&nbsp;&nbsp;名:
            <input type="text" name="username" placeholder="5~11字符" id="username">
        </div> <br>
        <div align="middle" >密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;:
            <input type="password" name="password" id="password" placeholder="输入密码">
        </div> <br>
        <div align="middle" >确认密码:
            <input type="password" id="password2" placeholder="确认密码">
        </div> <br>
        <div align="middle" >邮箱地址:
            <input type="text" name="email" id="email" placeholder="请输入邮箱">
        </div> <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div align="middle" >
            <input type="submit" value="注册" id="submit">
        </div>
    </form>
</body>
</html>